﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	AMI SmartGrid Dashboard
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<%--The Bing Maps V6.2 and V7.0 Map Version Links--%>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

<%--The Bing Maps V7.0 Version of the Java Scripts--%>
<script type="text/javascript">
	var map = null;
	var BingApiKey = '<%=ConfigurationManager.AppSettings["BingApiKey"].ToString()%>'
	var startLat   =  <%=ConfigurationManager.AppSettings["initialLatitude"]%>;
	var startLong  =  <%=ConfigurationManager.AppSettings["initialLongitude"]%>;

	function GetMapV7() 
	{
		  map = new Microsoft.Maps.Map(document.getElementById("map_canvas"),
		  {
			  credentials: BingApiKey,
			  center: new Microsoft.Maps.Location(startLat, startLong),
			  mapTypeId: Microsoft.Maps.MapTypeId.road,
			  zoom: 15
		  }
		  );
	}

	function AddLocationPinV7(latitude, longitude, title, description) 
	{
		//Sets the location of the pushpin by latitude / longitude
		var location = new Microsoft.Maps.Location(latitude, longitude);
		
		//Creates the pushpin and sets the pushpin properties
		var pushpin = new Microsoft.Maps.Pushpin(location);

		// Retrieve the location of the map center 
		var center = map.getCenter();

		// Create InfoBox
		var infobox = Microsoft.Maps.Ext.InfoBox(
			title,       /* <-- InfoBox Title to display */
			description, /* <-- InfoBox Description to display */
			map          /* <-- A refernce to the Map where the InfoBox will be displayed */
		);
		
		// Add InfoBox to Pushpin
		pushpin.setInfoBox(infobox);
		
		//Add the pushpin to the map 
		map.entities.push(pushpin);
	}

	function displayInfobox(e)
	{
		pinInfobox.setOptions({ visible:true });
	}
					

	function hideInfobox(e)
	{
		pinInfobox.setOptions({ visible: false });
	}


</script>

<%--The Bing Maps V6.2 Version of the Java Scripts--%>
<script type="text/javascript">
	var map = null;
	var shape;
	function GetMapV62() 
	{
		map = new VEMap('map_canvas');
		map.LoadMap(new VELatLong(27.94725, -82.46595), 10, 'Road', false);
	}

	function AddLocationPinV62(latitude, longitude, title, description) 
	{      
		//create new pushpin shape      
		shape = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude, longitude));      
		//set title for info box      
		shape.SetTitle(title);      
		//set html for info box      
		shape.SetDescription(description);
		//add pin      
		map.AddShape(shape);  
	}

	
</script>
<%--The Bing Maps V6.2 Version of the process--%>
<%--<script type="text/javascript">
	$(document).ready(function () {
		GetMapV62();
		//call the action created to retrieve the data
		$.post("/Home/Offices", null, function (data) 
		{
			//iterate through the 'data' retireved
			$.each(data, function (item, location)
			{
				AddLocationPin(location.Latitude, location.Longitude, location.Title, location.Description);
			});
		});
	});--
</script>%>

<%--The Bing Maps V7.0 Version of the process--%>

<% Html.RenderPartial("Map"); %>

<%--The Bing Maps V7.0 Version of the process--%>
<script type="text/javascript">
	$(document).ready(function () 
	{
		GetMapV7();

		//call this action to retrieve all the AMI sample data
		$.post("/Home/Locations", null, function (data) 
		{
			//iterate through the 'data' retireved
			$.each(data, function (item, location) 
			{
				AddLocationPinV7(location.Latitude, location.Longitude, location.Title, location.Description);
			});
		});


	});
</script>

<style>
	.infobox
	{
	    position: absolute;
	    z-index: 10000;
	    
	    width: 150px;
	    
	    background: #fff;
	    border: solid 1px #555;
	    padding: 8px;
	    color: #555;
	}
	.infobox h4
	{
	    color: #000;
	    margin: 0;
	    font-weight: bold;
	}
</style>
<script type="text/javascript">
(function ($m) {
    /* $m == Microsoft.Maps namespace */
    /* Add "Microsoft.Maps.Ext" namespace if it doesn't exist
    This is used to hold the custom InfoBox functionality */
    if (!$m.Ext) { $m.Ext = {}; }

    /* Microsoft.Maps.Ext.InfoBox extension */
    var InfoBox = $m.Ext.InfoBox = function (title, desc, map) {
        return new InfoBox.fn.init(title, desc, map);
    };
    InfoBox.prototype = InfoBox.fn = {
        init: function (title, desc, map) {
            this._element = null;
            this._title = title;
            this._description = desc;
            this._map = map;
        },
        title: function (v) {
            if (v !== undefined) {
                this._title = v;
                return this;
            }
            return this._title;
        },
        description: function (v) {
            if (v !== undefined) {
                this._description = v;
                return this;
            }
            return this._description;
        },
        show: function (e) {
            /* Get location of Pushpin */
            var loc = this.map().
                tryLocationToPixel(
                    e.target.getLocation(), Microsoft.Maps.PixelReference.page
                );
            if (this._element === null) {
                /* Create <div> to show as InfoBox */
                this._element = $('<div>').
                    addClass('infobox').
                    appendTo($(document.body)).
                    html('<h4>' + this.title() + '</h4>' + this.description());
            }
            /* Show InfoBox and set position*/
            this._element.show().css({
                position: 'absolute',
                /* offset the infobox a little */
                top: loc.y - 10,
                left: loc.x + 10
            });
        },
        hide: function () {
            /* Hide InfoBox from view */
            if (this._element !== null) {
                this._element.hide();
            }
        },
        map: function (v) {
            if (v) {
                this._map = v;
                return this;
            }
            return this._map;
        }
    };
    InfoBox.fn.init.prototype = InfoBox.fn;

    /* Microsoft.Maps.Pushpin extensions */
    (function (proto) {
        if (!proto.setInfoBox) {
            proto.setInfoBox = function (infoBox) {
                this.removeInfoBox();
                this.infobox = infoBox;
                /* attach event handlers */
                this.infoboxMouseOverHandler = $m.Events.addHandler(
                    this,
                    "mouseover",
                    function (e) {
                        infoBox.show(e);
                    });
                this.infoboxMouseOutHandler = $m.Events.addHandler(
                    this,
                    "mouseout",
                    function (e) {
                        infoBox.hide(e);
                    });
            };
        }
        if (!proto.removeInfoBox) {
            proto.removeInfoBox = function () {
                /* detach event handlers */
                $m.Events.removeHandler(this.infoboxMouseOverHandler);
                $m.Events.removeHandler(this.infoboxMouseOutHandler);
                this.infobox = null;
            };
        }
    })($m.Pushpin.prototype);
})(Microsoft.Maps);
</script>
</asp:Content>
